var that;
class Tab {
    constructor(id) {
        that = this
        this.tab = document.querySelector('#' + id)
        this.lis = this.tab.querySelectorAll('ul li')
        this.sections = this.tab.querySelectorAll('section')
    }
    inint() {
        for (var i = 0; i < this.lis.length; i++) {

            this.lis[i].index = i
            this.lis[i].onclick = this.toggleTab
        }
    }
    toggleTab() {
        that.clearClear()
        // console.log(this.index);
        this.className = 'liactive'
        that.sections[this.index].className = 'conactive'
    }
    clearClear() {
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].className = ''
            this.sections[i].className = ''
        }
    }
    addTab() {

    }
    removeTab() {

    }
    eidtTab() {

    }
}
var tab = new Tab("tab")
tab.inint()